<template>
  <div class="book-list">
    <div :class="['show-module', 'show-module-dynamic-'+global.showType]">
      <div @click="changeFilterShow()" class="show-filter">{{showFilter?'隐藏':'显示'}}筛选条件</div>
      <div :class="showFilter?'':'hidden'">
        <c-book-filter-line filterTitle="作品频道" @changevalue="changeFilterValue" :filterItem="bookDirections" filterType="bookDirections" :defaultValue="valueOfString(bookFilterParam.workDirection)"/>
        <c-book-filter-line filterTitle="作品分类" @changevalue="changeFilterValue" :filterItem="bookCategorysFilter" filterType="bookCategorys" :defaultValue="bookFilterParam.catId" value1="id"/>
        <c-book-filter-line filterTitle="是否完结" @changevalue="changeFilterValue" :filterItem="bookProgresses" filterType="bookProgresses" :defaultValue="valueOfString(bookFilterParam.bookStatus)"/>
        <c-book-filter-line filterTitle="作品字数" @changevalue="changeFilterValue" :filterItem="bookWords" filterType="bookWords" :defaultMinValue="valueOfString(bookFilterParam.wordCountMin)" :defaultMaxValue="valueOfString(bookFilterParam.wordCountMax)" value1="valueMin" value2="valueMax"/>
        <c-book-filter-line filterTitle="章节筛选" @changevalue="changeFilterValue" :filterItem="bookIndexs" filterType="bookIndexs" :defaultMinValue="valueOfString(bookFilterParam.indexCountMin)" :defaultMaxValue="valueOfString(bookFilterParam.indexCountMax)" value1="valueMin" value2="valueMax" cusDesc1="章" cusDesc2="章"/>
        <c-book-filter-line filterTitle="更新时间" @changevalue="changeFilterValue" :filterItem="bookUpdateTimes" filterType="bookUpdateTimes" :defaultValue="valueOfString(bookFilterParam.updatePeriod)"/>
        <c-book-filter-line filterTitle="排序方式" @changevalue="changeFilterValue" :filterItem="bookSorts" filterType="bookSorts" :defaultValue="bookFilterParam.sort"/>
        <c-book-filter-line filterTitle="屏蔽书籍" @changevalue="changeFilterValue" :filterItem="useShields" filterType="useShields" :defaultValue="bookFilterParam.useblacklist" v-if="$cookies.get('Authorization') != null" :filterNone="false"/>
      </div>
    </div>
    <div :class="['show-module', 'show-module-dynamic-'+global.showType]">
      <el-pagination class="all-book-pagination"
        background
        :layout="'prev, '+(global.isPc?'pager,':'')+'next, jumper, ->, total, slot'"
        :total="allBook.total"
        :page-count="allBook.pages"
        :current-page.sync="bookFilterParam.curr"
        :page-size.sync="bookFilterParam.limit"
        @current-change="handlerPageChange">
        <span v-if="!global.isPc" class="el-pagination-slot">{{allBook.pages}}页</span>
      </el-pagination>
      <div class="com-push-line" v-for="(item, i) in allBook.list" :key='item.id'>
        <span class="a-span" @click="util.goAnother(global, '/index/bookDetail?id='+item.id)"><img :src="item.picUrl" alt="" class="com-push-small"></span>
        <div class="com-push-show">
          <div class="com-push-list">
            <span class="com-push-sn">{{i+1}}</span>
            <span class="com-push-name">
              <span class="a-span" @click="util.goAnother(global, '/index/bookDetail?id='+item.id)">
                {{item.bookName}} [作者:{{item.authorName}}]
              </span>
            </span>
          </div>
          <div class="com-push-new-index">
            <span class="a-span" @click="util.goAnother(global, '/index/bookDetail?id='+item.id)">
              [{{item.indexCount}}] {{item.lastIndexName}}
            </span>
          </div>
          <span class="a-span" @click="util.goAnother(global, '/index/bookDetail?id='+item.id)">
            <!-- <div class="com-push-desc" v-html="this.item.bookDesc"></div> -->
            <div class="com-push-desc">{{util.getHtmlText(item.bookDesc)}}</div>
          </span>
          <div class="com-push-updatetime">{{item.lastIndexUpdateTime}}</div>
        </div>
      </div>
      <el-pagination class="all-book-pagination"
        background
        :layout="'prev, '+(global.isPc?'pager,':'')+'next, jumper, ->, total, slot'"
        :total="allBook.total"
        :page-count="allBook.pages"
        :current-page.sync="bookFilterParam.curr"
        :page-size.sync="bookFilterParam.limit"
        @current-change="handlerPageChange">
        <span v-if="!global.isPc" class="el-pagination-slot">{{allBook.pages}}页</span>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import cBookFilterLine from '../../components/index/book/BookFilterLine.vue';
export default {
  components:{
    cBookFilterLine
  },
  data(){
    return {
      //选中值
      bookFilterParam:{
        curr:1,
        limit:20,
        ...this.$route.query
        // workDirection:this.$route.query.workDirection==null?null:this.$route.query.workDirection.toString(),
        // catId:this.$route.query.catId==null?null:this.$route.query.catId.toString(),
        // bookStatus:this.$route.query.bookStatus==null?null:this.$route.query.bookStatus.toString(),
        // wordCountMin:this.$route.query.wordCountMin==null?null:this.$route.query.wordCountMin.toString(),
        // wordCountMax:this.$route.query.wordCountMax==null?null:this.$route.query.wordCountMax.toString(),
        // indexCountMin:0,
        // indexCountMax:0,
        // updatePeriod:this.$route.query.updatePeriod==null?null:this.$route.query.updatePeriod.toString(),
        // useblacklist:this.$route.query.useblacklist==null?null:this.$route.query.useblacklist.toString(),
        // sort:'last_index_update_time',
        // keyword:this.$store.state.searchKey,
      },
      //列表
      bookDirections:[
        {value:0,name:'男频'},
        {value:1,name:'女频'},
        {value:10,name:'下书网男频'},
        {value:11,name:'下书网女频'}
      ],
      bookCategorys:[],
      bookCategorysFilter:[],
      bookProgresses:[
        {value:0,name:'连载中'},
        {value:1,name:'已完结'}
      ],
      bookWords:[
        {valueMax:300000,name:'30万字以下'},
        {valueMin:300000,valueMax:500000,name:'30-50万字'},
        {valueMin:500000,valueMax:1000000,name:'50-100万字'},
        {valueMin:1000000,name:'100万字以上'}
      ],
      bookIndexs:[
        {valueMax:500,name:'500章以内'},
        {valueMin:500,valueMax:1000,name:'500-1000章'},
        {valueMin:1000,name:'1000章以上'}
      ],
      bookUpdateTimes:[
        {value:3,name:'三日内'},
        {value:7,name:'七日内'},
        {value:15,name:'半月内'},
        {value:30,name:'一月内'}
      ],
      bookSorts:[
        {value:'last_index_update_time',name:'更新时间'},
        {value:'word_count',name:'总字数'},
        {value:'visit_count',name:'点击量'}
      ],
      useShields:[
        {value:null,name:'跟随账号'},
        {value:'false',name:'停用'},
        {value:'true',name:'启用'}
      ],
      allBook:{
        list:[],
        total:0,
        pages:0
      },
      showFilter:false
    }
  },
  beforeCreate:function(){

  },
  created: function(){
    if(this.bookFilterParam.sort){
      this.changeFilterValue('bookSorts', this.bookFilterParam.sort);
    }else{
      this.bookFilterParam.sort = 'last_index_update_time';
    }
    this.listBookCategorys();
    if(this.bookFilterParam.keyword){
      this.$store.state.searchKey = this.bookFilterParam.keyword;
    }else{
      this.listAllBooks();
    }
  },
  // watch:{
  //   'bookCategorys': (newVal, oldVal) => {
  //     console.log(newVal);
  //     console.log(oldVal);
  //   }
  // },
  computed:{
    valueOfString(){
      return function(str){
        // console.log(str);
        // console.log(this.util.valueOfString(str));
        return this.util.valueOfString(str);
      }
    }
  },
  filters:{
  },
  methods:{
    listBookCategorys(){
      this.$http.post('/book/listBookCategory', {}, res => {
        // if(this.bookFilterParam.catId != null){
        //   for(let i=0,length=res.length; i<length; i++){
        //     let cat = res[i];
        //     if(cat.id == this.bookFilterParam.catId && cat.workDirection != this.bookFilterParam.workDirection){
        //       this.bookFilterParam.workDirection = cat.workDirection.toString();
        //       this.listAllBooks();
        //       break;
        //     }
        //   }
        // }
        // console.log(res);
        this.bookCategorys = res;
        this.fiterBookCategorys();
      });
    },
    listAllBooks(){
      this.$http.postForm('/book/searchByPage', this.bookFilterParam, res => {
        this.allBook.list = res.list;
        this.allBook.total = parseInt(res.total);
        this.allBook.pages = parseInt(res.pages);
      });
    },
    changeFilterValue(filterType, filterValue, filterVlueMax){
      // console.log(filterType);
      // console.log(filterValue);
      // console.log(filterVlueMax);
      switch(filterType){
        case 'bookDirections':
          this.bookFilterParam.workDirection = filterValue;
          // let params = {"workDirection":this.bookFilterParam.workDirection};
          this.bookFilterParam.catId = null;
          break;
        case 'bookCategorys':
          this.bookFilterParam.catId = filterValue;
          // params = {"workDirection":this.bookFilterParam.workDirection,"catId":this.bookFilterParam.catId};
          // this.$router.push("/index/allBook"+this.util.pieceURLParam(params));
          break;
        case 'bookProgresses':
          this.bookFilterParam.bookStatus = filterValue
          break;
        case 'bookWords':
          this.bookFilterParam.wordCountMin = filterValue;
          this.bookFilterParam.wordCountMax = filterVlueMax;
          break;
        case 'bookIndexs':
          this.bookFilterParam.indexCountMin = filterValue;
          this.bookFilterParam.indexCountMax = filterVlueMax;
          break;
        case 'bookUpdateTimes':
          this.bookFilterParam.updatePeriod = filterValue;
          break;
        case 'bookSorts':
          this.bookFilterParam.sort = filterValue;
          break;
        case 'useShields':
          this.bookFilterParam.useblacklist = filterValue;
      }
      this.fiterBookCategorys();
      this.changeUrl();
      this.listAllBooks();
    },
    handlerPageChange(currentPage){
      // this.bookFilterParam.curr = currentPage;
      this.changeUrl(currentPage);
      this.listAllBooks();
    },
    changeFilterShow(){
      this.showFilter = !this.showFilter;
    },
    changeUrl(curr){
      if(curr){
        this.bookFilterParam.curr = curr;
      }else{
        this.bookFilterParam.curr = 1;
      }
      let url = "/index/allBook"+this.util.pieceURLParam(this.bookFilterParam);
      if(url != this.$route.fullPath){
        this.$router.push(url);
      }
    },
    fiterBookCategorys(){
      // console.log("filter list...");
      if(this.bookFilterParam.workDirection == null){
        this.bookCategorysFilter = this.bookCategorys;
      }else{
        this.bookCategorysFilter = this.bookCategorys.filter( item => {
          return item.workDirection == this.bookFilterParam.workDirection;
        });
      }
    }
  },
  watch:{
    '$store.state.searchKey':function(){
      this.bookFilterParam.keyword = this.$store.state.searchKey;
      this.changeUrl();
      this.listAllBooks();
    }
  }
}
</script>

<style lang='scss' scoped>
.book-list {
  padding-top: 10px;
  .show-module-dynamic-mobile{
    padding: 10px;
    margin: 0 10px 10px 10px;
    font-size: 12px;
  }
  .show-module-dynamic-pc{
    font-size: 14px;
    width: 75%;
    padding: 10px 25px;
    margin: 0 auto 20px auto;
  }
  .show-module {
    background-color: #fff;
    border-radius: 10px;
    // width: 75%;
    .show-filter{
      text-align: center;
    }
    .com-push-title {
      height: 40px;
      margin: 0;
      font-size: 20px;
      border: 1px solid #E0E0E0;
      border-width: 0 0 2px 0;
      font-weight: bold;
      color: #333333;
    }

    .com-push-line {
      padding: 5px 0;
      .com-push-small {
        display: inline-block;
        vertical-align: top;
        width: 90px;
        height: 135px;
      }
      .com-push-show {
        // position: relative;
        height: 135px;
        padding: 0 0 0 10px;
        // display: flex;
        overflow: hidden;
        background-color: #F7F7F7;
        display: inline-block;
        width: calc(100% - 100px);

        .com-push-list {
          line-height: 18px;
          font-size: 14px;
          // width: 100%;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          .com-push-sn {
            text-align: center;
            display: inline-block;
            width: 18px;
            height: 18px;
            color: #fff;
            background-color: #999999;
            margin-right: 7px;
            font-size: 13px;
          }
          // .com-push-name{
          // }
        }
        .com-push-new-index{
          // position: absolute;
          // right: 0;
          margin: 0 5px 1px 0;
          text-align: right;
          font-size: 11px;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          a{
            color: #666;
          }
        }
        .com-push-desc {
          // display: inline-block;
          min-height:80px;
          float: right;
          width: 100%;
          overflow: hidden;
          font-size: 11px;
          color: #808080;
          // height: calc(100% - 40px);
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 5; //行数需设置
          line-clamp: 5;
          -webkit-box-orient: vertical;
          // white-space: nowrap;
        }
        .com-push-desc:hover {
          color: $base-color;
        }
        .com-push-updatetime{
          margin-right: 5px;
          text-align: right;
          color: #666;
        }
      }
    }

    .all-book-index{
      text-align: center;
      display: inline-block;
      width: 17px;
      height: 17px;
      line-height: 17px;
      color: #fff;
      background-color: #999999;
      margin-left: 6px;
      font-size: 13px;
    }
    .all-book-cat{
      color: #888;
    }
    // .all-book-name{

    // }
    .all-book-chapter{
      color: #666;
      font-size: 12px;
    }
    .all-book-chapter:hover{
      color: $base-color;
    }
    .all-book-author{
      font-size: 11px;
      color: #888;
    }
    .all-book-workcount{
      font-size: 11px;
      color: #999;
    }
    .all-book-indexcount{
      font-size: 11px;
      color: #999;
    }

    .all-book-pagination{
      padding: 10px 0 5px 0;
    }
  }
}
</style>

//对组件内部样式更改的单独拿出, 不加scoped
<style lang='scss'>
.book-list {
  .show-module {
    .all-book-show{
      th{
        padding: 10px 0;
      }
      td{
        padding: 8px 0;
      }
      .cell{
        user-select: text;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden; 
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
